<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#scroll{
				width: 100%;
				height: 285px;
				background-image: url(img/banner1.png);
				background-size: 6000px;
			}
			.scroll_box{
				width: 1100px;
				height: 285px;
				margin: 0 auto;
				/* background: palegreen; */
			}
			.scroll_main{
				float: left;
				width: 1000px;
				height: 285px;
				margin-left: 13px;
				background: pink;
			}
			#banner{
				float: left;
				width: 746px;
				height: 285px;
				overflow: hidden;
				position: relative;
				cursor: pointer;
			}
			#banner_ul{
				width: 746px;
				height: 285px;
				position: relative;
			}
			#banner_ul>li{
				width: 746px;
				height: 285px;
				list-style: none;
				position: absolute;
				top: 0px;
				left: 0px;
				opacity: 0;
				z-index: 1;
				transition: all 2s;
			}
			#banner_ul>li>img{
				width: 100%;
				height: 100%;
				
			}
			#cricle{
				position: absolute;
				bottom: 26px;
				left: 50%;
				transform: translateX(-50%);
				background: rgba(255,255,255,0.3);
				padding: 4px 8px;
				border-radius: 50px;
				z-index: 4;
			}
			#cricle>li{
				list-style: none;
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background: white;
				float: left;
				margin-right: 8px;
				cursor: pointer;
				transition: all 2s;
			}
			
			#bt_left{
				float: left;
				width: 37px;
				height: 64px;
				background: url(img/banner.png);
				background-position: 0px -360px;
				margin-top: 110px;
				cursor: pointer;
			}
			#bt_left:hover{
				background: url(img/banner.png);
				background-position: 0px -430px;
			}
			#bt_right{
				float: right;
				width: 37px;
				height: 64px;
				background: url(img/banner.png);
				background-position: 0px -510px;
				margin-top: 110px;
				cursor: pointer;
			}
			#bt_right:hover{
				background: url(img/banner.png);
				background-position: 0px -580px;
			}
			.download{
				float: right;
				width: 254px;
				height: 285px;
				background: url(img/download.png);
				position: relative;
				text-align: center;
			}
			
		</style>
	</head>
	<body>
		<div id="scroll">
			<div class="scroll_box">
				<span id="bt_left"></span>
				<div class="scroll_main">
					<div id="banner">
						<ul id="banner_ul">
							<li style="opacity: 1;z-index: 2;"><img src="img/banner1.png" ></li>
							<li><img src="img/banner2.png" ></li>
							<li><img src="img/banner3.png" ></li>
							<li><img src="img/banner4.png" ></li>
							<li><img src="img/banner5.png" ></li>
							<li><img src="img/banner6.png" ></li>
						</ul>
						<ul id="cricle">
							<li style="background: #c20c0c;"></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li style="margin-right: 0px;"></li>
						</ul>
					</div>
					<div class="download"></div>
				</div>
				<span id="bt_right"></span>
			</div>
		</div>
		
		<script type="text/javascript">
			var banner_ul = document.getElementById("banner_ul");
			var banner_li = document.getElementById("banner_ul").children;
			var banner = document.getElementById("banner");
			var left_btn = document.getElementById("bt_left");
			var right_btn = document.getElementById("bt_right"); 
			var bg =  document.getElementById("scroll");
			//存放背景图
			var picture = ['img/banner1.png', 'img/banner2.png', 'img/banner3.png', 'img/banner4.png', 'img/banner5.png', 'img/banner6.png'];
			// 获取ul的子级组成数组
			var cricle = document.getElementById("cricle").children;
			var i=0;
			// 封装
			function Interval_banner(){
				i++;
				if(i==6){
					i = 0;
				}
				Banner_ul();
			}
			//透明度，层级
			function Banner_opacity(){
				for(var m=0;m<banner_li.length;m++){
					banner_li[m].style.opacity = "0";
					banner_li[m].style.zIndex = "1";
				}
				banner_li[i].style.opacity = "1";
				banner_li[i].style.zIndex = "2";
			}
			
			// 轮播定时器
			var timer = setInterval(Interval_banner,3000)
			// 鼠标移入停止轮播
			banner.onmouseover=function(){
				clearInterval(timer);
			}
			// 鼠标移出继续轮播
			banner.onmouseout=function(){
				timer = setInterval(Interval_banner,3000)
			}
			//右按钮
			right_btn.onclick=function(){
				i++;
				if(i==6){
					i = 0;
				}
				Banner_ul();
			}
			//左按钮
			left_btn.onclick=function(){
				i--;
				if(i==-1){
					i = 5;
				}
				Banner_ul();
			}
			//点击小圆点
			for(var j=0;j<cricle.length;j++){
				cricle[j].index = j;
				cricle[j].onclick = function(){
					i = this.index;
					Banner_ul();
				}
			}
			// 封装
			function Banner_ul(){
				for(var j=0;j<cricle.length;j++){
					cricle[j].style.background = "white";
				}
				cricle[i].style.background = "#c20c0c";
				
				Banner_opacity();
				bg.style.backgroundImage = "url("+picture[i]+")";
				bg.style.transition = "all 3s";
			}
		</script>
	</body>
</html>
